當從外界獲得資料時，資料未必只會是一筆一筆的，更有可能的是一次會獲得超大筆資料，例如台北市的豪宅資料、1111購物節的商品資訊等等。這時候如果要用變數一個一個地去賦予值記錄這些資料，有點不切實際，既麻煩又顯得冗長。

陣列可以幫我們處理這個問題，我們可以說它是一個資料的集合，可以把很多的資料放在一個陣列裡，並賦予到單一個變數上，這樣就不用一次要命名並管理超級多的變數。

陣列火車

把陣列想像成一輛火車，每節車廂都可以存放一個值，值可以是任何的資料類型包括字串、數字、物件、布林值甚至是另一個陣列也可以，類似於火車車廂內可以載大量的人、行李或是一堆貨物。

比較特別的是，陣列的編號是從 0 開始的，所以如果想要抓出第一節車廂的值，它的編號其實是 0。

陣列寫法與宣告

我們把上面的火車用陣列的寫法寫出來，會用一對中括號 [] 把值都依序放在裡面，並且用逗號 , 隔開：

['魯夫', '鳴人', '小傑', '一拳超人', '李信', '哈克', '月見英子']

了解到陣列的寫法後，宣告一個變數並把這個陣列指向到該變數去，此時我們用了一個變數就把這麼多的值一次放進去：

let protagonists = ['魯夫', '鳴人', '小傑', '一拳超人', '李信', '哈克', '月見英子'];

也可以先宣告一個空陣列，再把值放進去：

let protagonists = [];
protagonists = ['魯夫', '鳴人', '小傑', '一拳超人', '李信', '哈克', '月見英子'];
console.log(protagonists); //(7) ['魯夫', '鳴人', '小傑', '一拳超人', '李信', '哈克', '月見英子']

讀取陣列資料

有了陣列資料後，接下來我們就要來看怎麼讀取這些資料啦！

在實務上我們在某些情況下可能會想去把陣列裡的某個資料拉出來使用，這時在程式碼上就需要讀取裡面的資料後並且將其賦予到新的變數，這樣就可以使用該變數來做不同的操作。

取值的方式是在陣列名稱的後方加上一組中括號 [] ，裡面放資料在陣列中的順序編號，記得，陣列是從 0 開始算的：

let protagonists = [];
protagonists = ['魯夫', '鳴人', '小傑', '一拳超人', '李信',' 哈克', '月見英子'];

console.log(protagonists[0]); //'魯夫'
console.log(protagonists[2]); //'小傑'

如果想要對某筆資料進行操作，可以將該筆資料賦予到新的變數去，這樣就可以用該變數進行想要的操作囉：

let protagonists = [];
protagonists = ['魯夫', '鳴人', '小傑', '一拳超人', '李信', '哈克', '月見英子'];

let onePiece = protagonists[0];

console.log(onePiece); //'魯夫'

陣列寫入資料

可以宣告一個空陣列後把資料寫入進去

宣告空陣列後寫入資料：

let protagonists = [];
protagonists[0] = "魯夫"
protagonists[1] = "鳴人"
console.log(colors); //(2)["魯夫", "鳴人"]

需要注意的是，如果放值時編號（車廂）有跳號，那中間空的編號（車廂）並不會被省略，會被安排空的編號，裡面的值則是 undefined

let protagonists = [];
protagonists[0] = "魯夫"
protagonists[4] = "李信"
console.log(protagonists); //(5)["魯夫",empty x 3,"李信"]
console.log(protagonists.length); //5 查此陣列的長度為 5

實用語法

知道怎麼宣告陣列、讀取裡面的資料後，當然會想要對陣列裡的資料做一些處理，此時就有一些陣列的原生語法可以讓我們使用來操縱這列資料，以下會列出一些比較常用的語法：

• 了解陣列長度

  可以使用 length 語法來了解陣列的長度

  let protagonists = [];
  protagonists = ['魯夫', '鳴人', '小傑', '一拳超人', '李信', '哈克', '月見英子'];
  console.log(protagonists.length); //7
  

• 更多資料寫入、刪除方式

  新增：push、unshift
  刪除：pop、shift

  1. push：陣列裡原本就有的語法，預設把要寫入的值(小括號裡面的資料)，抓出來後推到陣列的最後面去

  let protagonists = [];
  protagonists = ['魯夫', '鳴人', '小傑'];
  protagonists.push('悟空');
  console.log(protagonists); //(4)['魯夫', '鳴人', '小傑', '悟空']
  

  2. unshift：相較於 push，unshift 是把資料放到陣列的最前面去

  let protagonists = [];
  protagonists = ['魯夫', '鳴人', '小傑'];
  protagonists.unshift('悟空');
  console.log(protagonists); //(4)['悟空', '魯夫', '鳴人', '小傑']
  

  3. pop：刪除陣列的最後一筆資料

  let protagonists = [];
  protagonists = ['魯夫', '鳴人', '小傑'];
  protagonists.pop();
  console.log(protagonists); //(2)['魯夫', '鳴人']
  

  4. shift：刪除陣列最前面的一筆資料

  let protagonists = [];
  protagonists = ['魯夫', '鳴人', '小傑'];
  protagonists.shift();
  console.log(protagonists); //(2)['鳴人', 小傑']
  

• 刪除指定的資料

  如果想刪除陣列中指定的資料，可以使用 splice()，小括號內會有兩個參數，第一個數字為陣列的起始位置，第二個數字是要往後刪除幾筆資料(包含本身)

  let protagonists = [];
  protagonists = ['魯夫','鳴人','小傑','一拳超人','李信','哈克','月見英子'];
  protagonists.splice(2,3);//從編號 2 的位置包含自己往後刪除 3 筆資料
  console.log(protagonists); //(4)['魯夫', '鳴人', '哈克', '月見英子']
  

參考資料

線上課程
MDN
圖片來源：Unsplash